<template>
	<my-privilege :showPad="true" :showAlter="true" :agre="agre" :rule="rule" :title="title">
		<view class="focus">
			<view class="list" v-if="list.length">
				<view class="item" v-for="(item, idx) in list" :key="idx">
					<view class="name">{{ item.exp_name }}</view>
					<block v-for="(k, m) in item.conditions" :key="m">
						<view class="margin-bottom-xs">
							<view class="progress-box padding-bottom-xs">
								<view class="cu-progress striped active round sm">
									<view class="bg-red" :style="[{ width: loading && k.mode ? k.progress : k.percentage }]"></view>
								</view>
								<text class="margin-left"></text>
							</view>
							<view class="ms"><view class="name">{{ k.name }}</view><view>{{ k.percentage }}</view></view>								
						</view>
					</block>
					<view class="mini-btn">
						<navigator hover-class="none" v-if="!type" :url="'/pages/spree/packagelist?level='+item.level+'&ptype='+item.ptype" class="btn">{{ item.acontent }}</navigator>
						<view v-else-if="type === 4" @tap="shopUpdate(item)" :class="['btn', { disabled: !item.upgrade }]">
							{{ item.acontent }}
						</view>
						<view hover-class="none" v-else-if="type === 3" @tap="appliy(item)" :class="['btn', { disabled: !item.upgrade }]">{{ item.acontent }}</view>
					</view>					
				</view>
			</view>
			<view v-else-if="!list.length && result && (type === 3 || !type )" class="area">
				<view>
					<image :src="result.images"></image>
					<view class="title">{{ result.text_head }}</view>
					<view class="dsc">{{ result.text1 }}</view>
					<view class="dsc">{{ result.text2 }}</view>
				</view>
			</view>
			<empty-data v-else>什么也没有~</empty-data>			
		</view>
	</my-privilege>	
</template>

<script>
	import MyPrivilege from './components/privilege'
	import { Login } from '@/common/api'
	import { PromoterUpgrade, areaAgent, UpgradeData, sHugrade, bHugrade, StoreRewar } from '@/common/api/lbt'
	export default {
		name: 'MyLevel',
		components: { MyPrivilege },
		data () {
			return {
				list: [],
				super_shop: false,
				base_shop: false,
				agre: '',
				result: '',
				loading: false,
				type: ''
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = +options.type - 1
				uni.setStorageSync('s_type', this.type)
				this.getInfo()
			}
		},
		onShow () {
			if (this.type === '') {
				this.type = uni.getStorageSync('s_type')
				this.getInfo()
			}
		},
		computed: {
			title () {
				const title = ['我的等级', '代理商', '产品合作商', '区域商', '店铺升级']
				return title[this.type]
			},
			rule () {
				const rule = ['用户协议',  '代理商规则', '产品合作商规则', '区域商规则', '店铺规则']
				return rule[this.type]
			}
		},
		methods: {
			async getInfo (type) {
				uni.showLoading()
				switch(this.type) {
					case 0:
					await this.getLevel()
					break;
					case 1:
					break;
					case 2:
					break;
					case 3:
					await this.getArea()
					break;
					case 4:
					await this.shopUpgrade()
					break;
					case 5:
					break;
				}
				if (type === 1 && this.userInfo.login !== undefined) await this.reLogin()
				this.loading = true
				uni.hideLoading()
			},
			reLogin () {
				return new Promise(resolve => {
					Login(this.userInfo.login).then(res => {
						this.$store.commit('SET_RANK', res.data.cardEnti)
						resolve()
					})
				})
			},			
			appliy (item) {
				if (item.upgrade) {
					uni.navigateTo({
						url: '/pages/spree/applicationMaterials'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '您的条件没达到'
					});
				}
			},
			getLevel () {
				return new Promise(resolve => {
					PromoterUpgrade().then(res => {
						let result = res.data.data_arr
						for(let i in result) {
							if (typeof result[i] === 'object') this.list.push(result[i])
							if (typeof result[i] === 'string') this.agre = result[i]
						}
						this.list.map(item => {
							let _el = []
							if (!item.ptype) item.ptype = 0
							if (item.conditions) {
								for (let k in item.conditions) {
									_el.push(item.conditions[k])
								}
								item.conditions = _el
								return item
							} else {
								item.conditions = [
									{ pay_money: item.pay_money, percentage: `${item.percentage}%`, name: item.title }
								]
							}
						})
						this.list = this.list.filter((m, i) => i === 0)
						if (!this.list.length) {
							const o = res.data.data_arr
							this.agre = o.sell_detail
							this.result = o
						}
						resolve()
					})					
				})
			},
			getArea () {
				return new Promise(resolve => {
					areaAgent().then(res => {
						if (!res.code) {
							this.agre = res.data.rule.join('').replace(/\s+/g, '')
							const data = res.data.data_arr
							for(let item in data) {
								let condition = []
								for (let v in data[item].condition) {
									condition.push((data[item].condition)[v])
								}
								data[item]['condition'] = condition
								this.list.push(data[item])
							}
							this.list = this.list.map(item => {
								let o = {}
								o.exp_name = item.next_level_name
								o.conditions = item.condition.map(k => {
									let m = {}
									m.percentage = `${k.percentage}%`
									m.name = k.show_type
									m.ratio = `${k.show_num} / ${k.need_num}`
									return m
								})
								o.upgrade = item.is_can_upgrade
								o.acontent = '申请'
								return o
							})
						}
						resolve()
					})					
				})
			},
			shopUpdate (item) { // 店铺升级
				if (item.upgrade) {
					uni.showLoading({ mask: true })
					if (this.super_shop) {
						sHugrade({ come_type: 1, level: item.level }).then(res=> {
							uni.hideLoading()
							if (res.code === 20006) {
								uni.showModal({
									content: res.msg,
									showCancel: false
								})
							} else {
								uni.showModal({
									content: '升级成功',
									showCancel: false,
									success: () => {
										this.getInfo(1)
									}
								})
							}
						})						
					} else {
						bHugrade({ come_type: 1, level: item.upgrade_level }).then(res => {
							uni.hideLoading()
							if (res.status === 401) {
								uni.showModal({
									content: res.errormsg,
									showCancel: false
								})
							} else {
								uni.showModal({
									content: '升级成功',
									showCancel: false,
									success: () => {
										this.getInfo(1)
									}
								})
							}
						})							
					}									
				} else {
					uni.showToast({
						title: '您的升级条件没达到',
						icon: 'none'
					});
				}
			},
			getReward () {
				return new Promise(resolve => {
					StoreRewar().then(res => {
						if (!res.code) {
							this.base_shop = true
							this.agre = res.data.rule
							this.list = res.upgrade.map(item => {
								let m = {}
								m.exp_name = item.next_level_name
								m.upgrade = item.is_can_upgrade
								m.upgrade_level = item.upgrade_level
								m.acontent = '升级'
								m.conditions = item.condition.map(x => {
									let o = {}
									let ratio = `${x.show_num} / ${x.need_num}`
									o.name = x.show_type
									o.percentage = +res.data.display_mode === 2 ? `${x.percentage}%` : ratio
									o.mode = 2
									o.progress = `${x.percentage}%`
									return o
								})
								return m
							}).filter((item, idx) => !idx)
						}
						resolve()
					})					
				})
			},			
			shopUpgrade () {
				return new Promise((resolve, reject) => {
					UpgradeData().then(res => {
						if (!res.code) {
							const list = res.data.condition.filter((item, idx) => !idx)
							this.super_shop = true
							this.agre = res.data.rule
							this.list = list.map(item => {
								let result = {}
								result.exp_name = item.card
								result.acontent = '升级'
								result.level = item.id
								if (item.common.length === undefined) {
									let arr = []
									for (let i in item.common) {
										arr.push(item.common[i])
									}
									item.common = arr
								}
								result.conditions = item.common.map(n => {
									let k = {}
									k.percentage = +res.data.display_mode === 2 ? `${n.percentage}%` : n.ratio
									k.mode = 2
									k.progress = `${n.percentage}%`
									k.name = n.show_type
									return k
								})
								result.upgrade = item.is_can_upgrade
								return result
							})
							
						} else {
							this.getReward()
						}
						resolve()
					}).catch(err => {
						resolve()
						this.getReward()
					})
				})
			}
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less';
.fixedBody;
.focus {
	.list {
			.item {
				background-color:white;
				padding: 20upx 15upx;
				display: flex;
				position: relative;
				flex-flow: column;
				flex-direction: column;
				position: relative;
				& > .name {
					margin-bottom: 5upx;
				}
				&:first-of-type {
					margin-top: 15upx
				}
				&:not(:last-of-type) {
					.border-bottom;
				}
				.progress-box {
					display: flex;
				}
				.ms {
					& > .name {
						margin-bottom: 5upx;
					}					
					font-size: 22upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.mini-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					.btn {
						font-size: 22upx;
						color: #fff;
						background-color: #e64340;
						display: block;
						border-radius: 10upx;
						padding:  15upx 20upx;
						text-align: center;
						min-width: 100upx;
						&.disabled {
							background-color: @gray;
						}
					}
				}
			}		
	}
	.area {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		& > view {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-flow: column;
			image {
				display: block;
				width: 300upx;
				height: 300upx;
			}
			.title {
				font-size: @title;
				color: @red;
				padding: 10upx 0 20upx;
			}
			.dsc {
				font-size: @minSize;
				line-height: 1.5;
				color: @gray;
			}
		}
	}	
}
</style>
